<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/layui/css/layui.css">
<link rel="stylesheet" href="$request.getContextPath()/resources/bootstrap-table/css/bootstrap-table.min.css" >
<link rel="stylesheet" href="$request.getContextPath()/resources/cws/system/user/list.css" >
<title>用户列表</title>
</head>
<body>
  <input type="hidden" name="imageURL" value="$!url.zimg()">
  <div class="container-fluid">
     <div class="header">
        <span class="layui-breadcrumb" style="height: 50px">
		  <a href="javascript:void(0)"><span>系统设置</span></a>
		  <a href="javascript:void(0)"><span>用户管理</span></a>
		  <a href="javascript:void(0)"><span>用户列表</span></a>
		</span>
	 </div>
	 <div class="searchform">
	 	<form class="form-horizontal" role="form">
		  <div class="form-group">
		    <label for="userName" class="col-sm-1 control-label">用户名称</label>
		    <div class="col-sm-2">
		      <input type="text" class="form-control" name="userName" value="$!userName" placeholder="请输入用户名称">
		    </div>
		    <label for="userPhone" class="col-sm-1 control-label">手机号码</label>
		    <div class="col-sm-2">
		      <input type="phone" class="form-control" name="userPhone" value="$!userPhone" placeholder="请输入手机号码">
		    </div>
		    <label for="userEmail" class="col-sm-1 control-label">用户邮箱</label>
		    <div class="col-sm-2">
		      <input type="email" class="form-control" name="userEmail" value="$!userEmail" placeholder="请输入用户邮箱">
		    </div>
		    <div class="col-sm-2">
		      <button type="button" onclick="queryUser()" class="btn btn-default">查询</button>
		    </div>
		  </div>
		</form>
	 </div>
	 <div class="content">
	    <div id="toolbar">
			#if($shiro.hasPermission('system:user:add'))
				<button type="button" class="btn btn-default btn-sm" onclick="addUser()"><span class="glyphicon glyphicon-plus"></span>添加</button>
			#end
			#if($shiro.hasPermission('system:user:export'))
			    #if($model.has('sys_user'))
					<a type="button" class="btn btn-default btn-sm" href="$request.getContextPath()/common/export/excel/sys_user/xlsx"><span class="glyphicon glyphicon-export"></span>导出</a>
			    #end
			#end
			#if($shiro.hasPermission('system:user:statistics'))
				<button type="button" class="btn btn-default btn-sm" onclick="userStatistics()"><span class="glyphicon glyphicon-star"></span>统计</button>
			#end
	    </div>
	    <table id="table"
	           data-toolbar="#toolbar" 
	           data-show-refresh="true"
	           data-search="false"
               data-show-toggle="true"
               data-show-columns="true"
               data-show-export="true"
               data-id-field="id"
	           data-show-export="true"
           	   data-pagination="true"
           	   data-query-params="queryParams"
           	   data-query-type="limit"
           	   data-show-footer="false"
           	   data-click-to-select="true"
           	   data-single-select="false"
           	   data-striped="true"
           	   data-method="get"
           	   data-url="$request.getContextPath()/system/user/page"
           	   data-side-pagination="server"
	           data-page-list="[10, 25, 50, 100, ALL]" 
	           data-show-pagination-switch="true"
           	   data-id-field="userId"
           	   data-search-on-enter-key="true"
           	   data-pagination-v-align="bottom"
	           data-show-pagination-switch="true">
	     </table>
	 </div>
  </div>
</body>
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" src="$request.getContextPath()/resources/layer/layer.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/layui.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/lay/modules/element.js"></script>

<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>

<!--<script type="text/javascript" src="$request.getContextPath()/resources/cws/system/user/list.js"></script>-->
<script type="text/javascript">
	/**
	 * 用户列表
	 */
	layui.use(['laypage', 'layer','element']);
	//添加用户
	function addUser(){
		top.window.layer.open({
			type: 2,
			title :'添加用户',
			maxmin: true,
			content: ['../../system/user/add','yes'],
			area: ['800px', '600px'],
			end:function(){
				queryUser();
			}
		});
	}
	//用户统计
	var statistiscTabPermission=[];
	var regStatisticsPermission="$shiro.hasPermission('system:user:regStatistics')";
	if(regStatisticsPermission&&regStatisticsPermission=="true"){
		statistiscTabPermission.push({title: '注册统计',content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/regStatistics" style="width: 100%; height: 99.5%;"></iframe>'});
	}
	var hareaStatisticsPermission="$shiro.hasPermission('system:user:hareaStatistics')";
	if(hareaStatisticsPermission&&hareaStatisticsPermission=="true"){
		statistiscTabPermission.push({title: '地区分布',content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/hareaStatistics" style="width: 100%; height: 99.5%;"></iframe>'});
	}
	var accessStatisticsPermission="$shiro.hasPermission('system:user:accessStatistics')";
	if(accessStatisticsPermission&&accessStatisticsPermission=="true"){
		statistiscTabPermission.push({title: '访问统计',content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/accessStatistics" style="width: 100%; height: 99.5%;"></iframe>'});
	}
	var sexStatisticsPermission="$shiro.hasPermission('system:user:sexStatistics')";
	if(sexStatisticsPermission&&sexStatisticsPermission=="true"){
		statistiscTabPermission.push({title: '性别统计',content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/sexStatistics" style="width: 100%; height: 99.5%;"></iframe>'});
	}
	var ageStatisticsPermission="$shiro.hasPermission('system:user:ageStatistics')";
	if(ageStatisticsPermission&&ageStatisticsPermission=="true"){
		statistiscTabPermission.push({title: '年龄统计',content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/ageStatistics" style="width: 100%; height: 99.5%;"></iframe>'});
	}
	function userStatistics(){
		top.layer.tab({
			area: ['900px', '600px'],
			maxmin: true,
			shift:3,
			tab:statistiscTabPermission
			/*tab: [{
				title: '注册统计',
				content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/regStatistics" style="width: 100%; height: 99.5%;"></iframe>'
			}, {
				title: '地区分布',
				content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/hareaStatistics" style="width: 100%; height: 99.5%;"></iframe>'
			}, {
				title: '访问统计',
				content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/accessStatistics" style="width: 100%; height: 99.5%;"></iframe>'
			}, {
				title: '性别统计',
				content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/sexStatistics" style="width: 100%; height: 99.5%;"></iframe>'
			}, {
				title: '年龄统计',
				content: '<iframe scrolling="yes" frameborder="0" src="../../system/user/ageStatistics" style="width: 100%; height: 99.5%;"></iframe>'
			}]*/
		});
	}
	//初始化表格
	function initTable() {
		var $table = $('#table');
		$table.bootstrapTable({
			columns: [{
				field: 'state',
				checkbox: true,
				width:40,
				align: 'center',
				valign: 'middle',
				visible:false
			},{
				title: '用户ID',
				field: 'userId',
				width:40,
				align: 'center',
				valign: 'middle',
				visible:false
			},{
				title: '用户头像',
				field: 'avator',
				align: 'center',
				class:'headerImg',
				valign: 'middle',
				events: headerImgEvents,
				formatter:headerImgFormatter
			},{
				title: '用户名称',
				field: 'userName',
				width:200,
				align: 'center',
				valign: 'middle'
			}, {
				title: '用户手机号码',
				field:'phone',
				width:150,
				align: 'center',
				valign: 'middle'
			},{
				title: '用户邮箱',
				field:'email',
				width:200,
				align: 'center',
				valign: 'middle'
			},{
				title: '用户类型',
				field:'type',
				width:100,
				align: 'center',
				valign: 'middle'
			},{
				title: '用户性别',
				field:'sex',
				width:80,
				align: 'center',
				valign: 'middle'
			},{
				title: '用户生日',
				field:'birthday',
				width:200,
				align: 'center',
				valign: 'middle',
				formatter:birthdayFormatter
			},{
				title: '操作',
				field: 'operate',
				align: 'center',
				valign: 'middle',
				events: operateEvents,
				formatter: operateFormatter
			}]
		});
	}
	//用户头像展示
	function headerImgFormatter(value, row, index){
		var imageURL=$("input[name='imageURL']").val()+"/";
		return '<img src="'+imageURL+row.avator+'" width="100px" height="40px" style="" class="userHeader"/>';
	}
	//日期转换
	function birthdayFormatter(value, row, index){
		if(value==null){
			return null;
		}
		if(value.length>=10){
			return value.substring(0,10);
		}
		return value;
	}
	//头像点击事件
	var headerImgEvents={
		'click .userHeader': function (e, value, row, index) {
			var repeatNum=1;
			//点击头像 放大图像
			$(".headerImg").click(function(){
				if(repeatNum==0){
					return;
				}
				repeatNum--;
				top.window.layer.open({
					type: 2,
					title :'用户头像',
					maxmin: true,
					content: ['../../common/image/show/'+row.avator,'yes'],
					area: ['800px', '600px']
				});
			});
		}
	};

	//用户操作权限按钮
	var permissionButtons=[];
	var viewUserPermission="$shiro.hasPermission('system:user:view')";
	if(viewUserPermission&&viewUserPermission=="true"){
		permissionButtons.push('<button type="button" class="btn btn-default btn-sm userDetail"><span class="glyphicon glyphicon-eye-open"></span>查看</button>');
	}
	var resetPasswordPermission="$shiro.hasPermission('system:user:resetPassword')";
	if(resetPasswordPermission&&resetPasswordPermission=="true"){
		permissionButtons.push('<button type="button" class="btn btn-default btn-sm resetPassword"><span class="glyphicon glyphicon-wrench"></span>重置密码</button>');
	}
	var editUserPermission="$shiro.hasPermission('system:user:edit')";
	if(editUserPermission&&editUserPermission=="true"){
		permissionButtons.push('<button type="button" class="btn btn-default btn-sm editUser"><span class="glyphicon glyphicon-edit"></span>编辑</button>');
	}
	var deleteUserPermission="$shiro.hasPermission('system:user:delete')";
	if(deleteUserPermission&&deleteUserPermission=="true"){
		permissionButtons.push('<button type="button" class="btn btn-default btn-sm deleteUser"><span class="glyphicon glyphicon-trash"></span>删除</button>');
	}
	var allowRolePermission="$shiro.hasPermission('system:user:allowRole')";
	if(allowRolePermission&&allowRolePermission=="true"){
		permissionButtons.push('<button type="button" class="btn btn-default btn-sm allowRole"><span class="glyphicon glyphicon-tree-deciduous"></span>分配角色</button>');
	}
	function operateFormatter(value, row, index) {
		return permissionButtons.join('');
	}
	//表格点击事件
	var operateEvents = {
		//用户详情
		'click .userDetail': function (e, value, row, index) {
			top.window.layer.open({
				type: 2,
				title :'查看用户详情',
				maxmin: true,
				content: ['../../system/user/view/'+row.userId,'yes'],
				area: ['800px', '600px']
			});
		},
		//重置用户密码
		'click .resetPassword': function (e, value, row, index) {
			layer.confirm('你确定要重置这个用户的密码吗?(重置密码为123456)', {icon: 3, title:'提示'}, function(index){
				$.post("../../system/user/resetPwd",{userId:row.userId,userName:row.userName,password:'123456',_method:'put'},function(data){
					if(data.code==200){
						top.layer.msg(data.msg,{
							icon: 1,
							skin: 'demo-class',
							title :'信息',
							time:500,
							area: ['300px', '160px'],
							offset: 'rb'
						});
						layer.close(index);
					}else{
						layer.alert(data.msg);
					}
				});
			});
		},
		//编辑用户
		'click .editUser': function (e, value, row, index) {
			top.window.layer.open({
				type: 2,
				title :'编辑用户',
				maxmin: true,
				content: ['../../system/user/edit/'+row.userId,'yes'],
				area: ['800px', '600px'],
				end:function(){
					queryUser();
				}
			});
		},
		//删除用户
		'click .deleteUser': function (e, value, row, index) {
			layer.confirm('你确定要删除用户【'+row.userName+'】吗?', {icon: 3, title:'提示'}, function(index){
				$.post("../../system/user/delete/"+row.userId,{_method:'delete'},function(data){
					if(data.code==200){
						top.layer.msg(data.msg,{
							icon: 1,
							skin: 'demo-class',
							title :'信息',
							time:500,
							area: ['300px', '160px'],
							offset: 'rb',
							end :function(){
								queryUser();
							}
						});
					}else{
						layer.alert(data.msg);
					}
				});
			});
		},
		//用户分配角色
		'click .allowRole': function (e, value, row, index) {
			top.window.layer.open({
				type: 2,
				title :'用户分配角色',
				maxmin: true,
				content: ['../../system/user/allowRole?userId='+row.userId,'yes'],
				area: ['600px', '400px']
			});
		}
	};
	function queryParams(params) {
		return {
			beginIndex:params.offset,
			pageSize:params.limit,
			userName:$("input[name='userName']").val(),
			userPhone:$("input[name='userPhone']").val(),
			userEmail:$("input[name='userEmail']").val()
		};
	}
	//表单查询
	function queryUser(){
		var $table = $('#table');
		$table.bootstrapTable("refresh");
	}
	$(function(){
		initTable();
		msg('用户信息加载完毕');
	});
</script>
</html>
#parse("/portal/account/footer2.html")